<template>
    <transition name="slide-up">
        <div v-show="show" class="welcome">
            <h1>{{msg}}</h1>
            <h2>网易云音乐</h2>
        </div>
    </transition>
</template>
<script>
    export default {
        name: 'welcome',
        computed: {
            show(){
                return true;
            }
        },
        data() {
            return {
                msg: '拥抱Vue，享受生活'
            }
        },
        methods: {}
    }
</script>
<style scoped>
    .welcome {
        text-align: center;
        overflow: hidden;
        line-height: 2em;
    }

    h1 {
        color: #FFF;
        text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25);
    }

    .slide-up-enter-active {
        transition: all .5s ease;
    }

    .slide-up-leave-active {
        transition: all .8s ease;
    }

    .slide-up-enter, .slide-up-leave-active {
        transform: scale(0, 0);
    }
</style>